<template>
  <!-- 底部模板展示 -->
  <scroll-view class="menu-content" scroll-y="true" :show-scrollbar="false">
    <view class="content">
      <view
        class="menu-item"
        v-for="(item, index) in myComponentsNames.list"
        :key="item"
        @click="activeFn(index)"
      >
        <!-- 动态组件 -->
        <component :is="item"></component>
      </view>
    </view>
  </scroll-view>
</template>

<script>
import { defineComponent, reactive, toRefs } from "vue";
import { myComponentsNames } from "@/components/globalComponents";
export default defineComponent({
  name: "",
  props: {},
  components: {},
  setup(props, context) {
    const data = reactive({
      myComponentsNames,
    });
    const activeFn = (index) => {
      // 跳转页面传递参数/pages/comPage/panel
      uni.navigateTo({
        url: `/pages/linkPage/componentsPage/list?index=${index}`,
      });
    };
    return {
      activeFn,
      ...toRefs(data),
    };
  },
});
</script>

<style scoped lang="less">
.menu-content {
  height: calc(100% - 80rpx);
  .content {
    background: #ddd;
    padding: 10rpx;
    box-sizing: border-box;
    .menu-item {
      box-sizing: border-box;
      margin-bottom: 10rpx;
      // 防止元素分裂
      break-inside: avoid;
      // 苹果兼容问题
      // &:after {
      //   content: "";
      //   display: block;
      //   width: 100%;
      //   height: 3px; /* 微小高度，修复空白 */
      //   background: transparent;
      // }
    }
  }
}
</style>
